@<template>
  <div class="tabControl">
    <nav-bar>
      <div class="lei_mid_bar" slot="mid_bar">
        <div v-for="(item, index) in titile" :key="item" @click="midbarClick($event)" :class="{Active:currentInde == index}" >
          {{ item }}
        </div>
        <!-- <div id='mid_bar_mid'   @click="leftClick($event)"><slot name='mid_bar_mid'>新款</slot></div>
            <div id='mid_bar_right '  @click="leftClick($event)"><slot name='mid_bar_right'>精选</slot></div> -->
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";

export default {
  data() {
    return {
      isActive: false,
      thatEvent: null,
      currentInde: 0,
    };
  },
  props: {
    titile: {
      type: Array,
      default() {
        return ["流行", "新款", "精选"];
      },
    },
  },
  components: {
    NavBar,
  },
  methods: {
    midbarClick(event) {
      if (this.thatEvent) {
        this.thatEvent.target.className = "";
      }
      event.target.className = "Active";
      this.thatEvent = event;
      let type = event.target.innerHTML.trim();
      if(type=='流行'){
        type = 'pop',
        this.currentInde = 0
      }else if (type == '新款'){
        type = 'new',
        this.currentInde = 1

      }else {
        type = 'sell',
        this.currentInde = 2
      }
      
      this.$emit('tochange',type,this.currentInde)
    },
  },
};
</script>

<style>
.lei_mid_bar {
  display: flex;
  justify-content: space-around;
  flex: 1;
  line-height: 30px;
  font-size: 14px;
  /* border-bottom: 2px solid; */
}
.lei_mid_bar div:nth-child(n){
    padding: 0 5px;
}
.Active {
  color: red;
  
  border-bottom: 2px solid red;
}
/* .tabControl {
  position: fixed;
  top: 0px;
  background-color: #fff;
  width: 100%;
  z-index: 3;
} */
</style>